<template>
    <el-popover placement="bottom" v-model="show" width="300" trigger="click">
        <div class="cl-select-popover">
            <div class="top">
                <div class="hint">{{ hintText || '选择（可多选）' }}</div>
                <span class="count">{{ checkedCount }}</span>
                <div class="select-all" @click="selectAll">{{ this.checkedCount === this.selected.length ? '取消选择' : '选择全部' }}</div>
            </div>

            <div class="items">
                <cl-button v-for="(v, i) in selected"
                           :focus="v.checked"
                           @click="handleClick(v)"
                           :key="'cl-select-popover-btn' + i">{{ v.name }}</cl-button>
            </div>
        </div>
        <div class="actions">
            <slot name="actions">
                <cl-button size="big" pattern="primary" @click="submit">{{ actionText || '确定' }}</cl-button>
            </slot>
        </div>
        <template slot="reference">
            <slot name="reference" v-bind:show="show"><cl-button type="more" :focus="show">{{ text }}</cl-button></slot>
        </template>
    </el-popover>
</template>

<script>
export default {
    name: 'ClSelectPopover',
    props: {
        text: String,
        hintText: String,
        actionText: String,
        data: Array
    },
    data() {
        return {
            show: false,
            selected: []
        }
    },
    mounted() {
        this.data.forEach((v, i) => {
            this.selected.push({
                id: i,
                ...v,
                checked: false
            })
        })
    },
    methods: {
        handleClick(v) {
            v.checked = !v.checked
        },
        selectAll() {
            let check = this.checkedCount !== this.selected.length
            this.selected.forEach(v => {
                v.checked = check
            })
        },
        submit() {
            if (this.checkedCount <= 0) {
                this.$message.warning('请至少选择一个记录')
                return
            }
            this.$emit('submit', this.selected)
            this.show = false
        }
    },
    computed: {
        checkedCount() {
            let i = 0
            this.selected.forEach(v => {
                if (v.checked) i++
            })
            return i
        }
    }
}
</script>

<style lang="less" scoped>
    @import "../assets/css/variable/variable.less";

    .cl-select-popover {
        padding: 12px;

        .top {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .hint {
                color: #999999;
                font-size: 12px;
            }

            .count {
                flex: 1;
                color: @primaryColor;
            }

            .select-all {
                color: @primaryColor;
                cursor: pointer;
            }
        }

        .items {
            display: flex;
            flex-wrap: wrap;

            .cl-button {
                margin-left: 0;
                width: 115px;
                padding: 3px 8px;
                margin-bottom: 10px;

                font-size: 12px;
                box-shadow: 0 8px 11px -8px #e5eced;

                &:nth-of-type(2n) {
                    margin-left: 20px;
                }
            }
        }
    }

    .more {
        display: flex;
        align-items: center;

        color: @primaryColor;
        cursor: pointer;

        margin-top: 16px;

        img {
            width: 12px;
            height: 12px;
            margin-left: 3px;
        }

        .down {
            transform: rotate(180deg);
        }
    }

    .actions {
        display: flex;
        align-items: center;
        justify-content: center;

        padding-bottom: 30px;
        padding-top: 16px;
    }
</style>
